const dataElement = document.getElementById('data');
const count = document.getElementById('count');
const room = document.getElementById('room');

initIo(room.textContent);

socket.on('pick', function (event) {
  const dataList = event.data.payload;
  if (!dataList || !dataList.length) return;
  let _html = dataElement.innerHTML;
  const length = dataElement.querySelectorAll('tr').length;
  dataList.forEach(function (item, index) {
    const { x, y, z, time } = item;
    const frag = `<tr>
          <th scope="row">${length + index + 1}</th>
          <td>${x}</td>
          <td>${y}</td>
          <td>${z}</td>
          <td>${time}</td>
          <td>${new Date(time).toLocaleString()}</td>
        </tr>`;
    _html += frag;
  });

  dataElement.innerHTML = _html;
  count.innerText = dataElement.querySelectorAll('tr').length;
});
